<template>
  <div>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-row :gutter="12">
        <a-col :md="2" :sm="4">
          <a-date-picker :allowClear="false" v-model="StartTime" placeholder="开始日期" @change="onChangeStartTime"/>
        </a-col>
        <a-col :md="2" :sm="4">
          <a-date-picker :allowClear="false" v-model="EndTime" placeholder="结束日期" @change="onChangeEndTime"/>
        </a-col>
        <a-col   v-has="'admin:parkCode'" :md="4" :sm="8">
          <a-select  style="width: 200px" :value="ParkCode" :options="ParkOptions" @change="ParkSelect">
          </a-select>
        </a-col>
        <a-col :md="4" :sm="8">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
        </a-col>
      </a-row>
    </div>

  </a-card>
  <a-card
    :bordered="false"
    title="收入类型分析"
  >
    <div class="chartWrap" id="IncomeTypeChartWrap" style="height:500px"></div>
  </a-card>
  </div>
</template>
<script>
import {filterObj} from "@/utils/util";
import {getAction, httpAction} from "@api/manage";
import * as echarts from "echarts";

export default {
  name: "IncomeTypeChart",
  data() {
    return {
      ParkCode: '',
      ParkOptions:[{value:'',label:'请选择停车场'}],
      queryParam: {
        "opTime_begin": "",
        "opTime_end": "",
        "type": "-1",
      },
        url:{
          ParkList:'/parking/parkInfo/list',
          list:'/form/ParkTotalInfo/list'
        },
      currentStartTimeMillis:0,
      currentEndTimeMillis:0,
      MyChartData:[],
      StartTime:'',
      EndTime:''
    }
  },
  mounted() {
    this.loadParkData()
    this.ReCreateChart()
  },
  computed:{
    QueryDays:function () {
      return 30-((this.currentEndTimeMillis - this.currentStartTimeMillis)/1000/60/60/24)
    }
  },
  methods: {
    ReCreateChart(){
      this.$nextTick(()=>{
        this.chartCreate();
      })
    },
    onChangeStartTime(date, dateString) {
      this.queryParam.opTime_begin = dateString;
      this.currentStartTimeMillis = date._d.getTime();
    },
    onChangeEndTime(date, dateString) {
      this.queryParam.opTime_end = dateString;
      this.currentEndTimeMillis = date._d.getTime();
    },
    searchQuery() {
      let startTime = this.queryParam.opTime_begin;
      let endTime = this.queryParam.opTime_end;
      if (startTime !== "" && endTime !== "") {
        if (startTime > endTime) {
          this.$message.error("开始时间不能大于结束时间");
          return
        }
      }
      if (startTime === "" && endTime !== "") {
        this.$message.error("请选择开始时间");
        return
      }

      if (startTime !== "" && endTime === "") {
        this.$message.error("请选择结束时间");
        return
      }
      if(this.QueryDays<0)
      {
        this.$message.error("开始时间与结束时间的最大间隔为30天")
        return
      }
      this.chartCreate();
    },

    getQueryParams() {
      var param = Object.assign({});
      if (this.queryParam.opTime_begin !== "" && this.queryParam.opTime_end !== "") {
        param.startTime = this.queryParam.opTime_begin
        param.endTime = this.queryParam.opTime_end
      }
      param.parkCode = this.ParkCode
      return filterObj(param);
    },
    searchReset: function () {
      this.StartTime = ''
      this.EndTime = ''
      this.currentStartTimeMillis = 0
      this.currentEndTimeMillis = 0
      this.ParkCode = ''
      this.queryParam = {}
      this.chartCreate();
    },
    ParkSelect(value){
      this.ParkCode = value
    },
    loadParkData() {
      var Params = {}
      httpAction(this.url.ParkList,Params,"get").then((res)=>{
        if(res.success)
        {
          this.ParkOptions =[{value:'',label:'请选择停车场'}]
          res.result.records.forEach((park)=>{
            this.ParkOptions.push({
              value: park.parkCode,
              label: park.parkName
            })
          })
          this.ParkCode = this.ParkOptions[0].value
        }
      })
    },
    chartCreate(){
      this.ResetChart()
      const Params = this.getQueryParams();
      getAction(this.url.list,Params).then( (res)=>{
        if(!document.getElementById('IncomeTypeChartWrap'))
        {
          return
        }
        const myChart = echarts.init(document.getElementById('IncomeTypeChartWrap'));
        var PayTypeOne = 0;
        var PayTypeTwo = 0;
        var PayTypeThree = 0;
        this.ResetChart()
        res.result.forEach((item)=>{
          PayTypeOne = PayTypeOne + item.payTypeOne
          PayTypeThree =PayTypeThree+ item.payTypeThree
          PayTypeTwo = PayTypeTwo + item.payTypeTwo
        })
        this.MyChartData.push({
          value:PayTypeOne,name:'微信'
        })
        this.MyChartData.push({
          value:PayTypeTwo,name:'支付宝'
        })
        this.MyChartData.push({
          value:PayTypeThree,name:'无感支付'
        })
        myChart.setOption({
          title:{
            /* text:'本月累计收入金额：{num|'+total+'}元',*/
            textStyle:{
              rich:{
                num:{
                  color:'#3572E2',
                  fontWeight:'bold',
                  fontSize:18
                }
              }
            },
            left:'center'
          },
          grid:{
            left:'5%',
            right:'5%'
          },
          series: [
            {
              name:'收入类型统计',
              type: 'pie',
              data: this.MyChartData,
              smooth:true,
            },
          ],
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c}'

          },
        });
        window.clearTimeout()
        setTimeout(function (){
          window.onresize = function () {
            myChart.resize();
          }
        },300)
      })
    },
    ResetChart(){
      this.MyChartData= []
    },
  }
}
</script>

<style scoped>
@import '~@assets/less/common.less';
</style>